<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="libs :: header('导入数据源表')"></th:block>
</head>
<body>
  <div id="ModulePage">
        <ivz-basic-view ref="vbt" :metas="metas" :config="config"></ivz-basic-view>
  </div>
</body>
<th:block th:include="libs :: footer"></th:block>
<script>
  let vue = new Vue({
      el: "#ModulePage",
      data: {
          metas: [
              {field: 'name', title: '表名', width: 280, sorter: function (a, b) {
                      return a.name.localeCompare(b.name);
                  }},
              {field: 'comment', title: '表描述', width: -1},
              {field: 'action', title: '操作', type: 'action', width: 220}
          ],
          config: {
              table: {
                  submitType: 'entity', // 提交整个实体对象
                  selection: {fixed: 'left'},
                  pagination: {},
                  loadFinished: function (rows) { // 还没导入的表不存在id, 导致多选框出现问题
                      if(rows) {
                          for(let i=0; i<rows.length; i++) {
                              rows[i]['id'] = i;
                          }
                      }
                  }
              },
              search: {
                  title: '说明:',
                  content: '只显示未导入过的表信息'
              }
          },
      },
      created: function() {
          // 重新修改导入表功能的回调, 添加操作提醒
          this.$page.setActionMeta("import", {callBack: function (row) {
              return new Promise((resolve) => {
                  resolve({tipTitle: '确定要重新导入表配置('+row.name+")"
                      , tipContent: '此动作将会删除原来的表、表字段配置, 生成状态将重置为未生成'
                      , success: function (resp) {
                            vue.$page.query(); // 重新导入成功后的回调, 重新加载页面数据
                      }});
              })
          }});
      },
      methods: {

      }
  });
</script>
</html>
